<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    想要实现一个动画，需要使用
    @keyframes 动画名 {

    }

    动画规则可以从
      0% {}  -> 100% {}

      如果只写0% -> 100% 和过渡效果相似，我们也可以直接使用
      from -> to

      也可以将from -> to 结合百分比使用
      
      如果对应的阶段的动画效果相同
      如果0% 10% 效果相同，可以直接这么写
      0%, 10% {

      }

      动画规则中不需要写选择器，动画中的属性会自动的添加给绑定该动画选择器



   -->
</body>
</html>